<template>
  <div>
    <input type="button" value="浪起来" @click="change" />
    <input type="button" value="停止" @click="stop" />
    <p>{{ msg }}</p>
  </div>
</template>

<script>
// 字符串 数组相关的方法
// 字符串截取
// substring
// substr
// slice
export default {
  // data中的数据是所有的方法可以随便用，所以公共的变量就可以写在这里面
  data() {
    return {
      msg: "我拿Buff,谢谢~",
      timerId: null,
    };
  },
  methods: {
    change() {
      if (this.timerId) return; //防止频繁点击
      //普通模式下定时器中this是window
      this.timerId = setInterval(() => {
        this.msg = this.msg.slice(1) + this.msg.slice(0, 1);
      }, 500);
    },
    stop() {
      clearInterval(this.timerId);
      this.timerId = null;
    },
  },
};
</script>

<style scoped></style>
